<template>
  <div>
    <tiny-form :inline="true" label-position="center" label-align="true" label-width="100px" size="small" >
 
        <tiny-form-item label="字典编码">
          <tiny-input v-model="data.editData.dictCode" placeholder="字典编码" :disabled="data.disabled"></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="字典名称">
          <tiny-input v-model="data.editData.dictName" placeholder="字典名称"></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="数据来源">
          <vo-select  default :disabled="data.disabled" dictCode="dictDataSource" v-model:value="data.editData.dataSource" />
        </tiny-form-item>
        <tiny-form-item label="备注">
          <tiny-input v-model="editData.remark" placeholder="备注"></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="是否树状" v-show="!data.static">
          <vo-select default :disabled="data.disabled"  dictCode="yesOrNo" v-model:value="data.editData.isTree" @change="changeDataType()" /> 
        </tiny-form-item>
        <tiny-form-item label="有效值">
          <tiny-input v-model="data.editData.displayValue" placeholder="默认:value"></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="显示值">
          <tiny-input v-model="data.editData.displayName" placeholder="默认:label"></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="是否缓存">
          <vo-select   dictCode="yesOrNo" v-model:value="data.editData.isCache" />
        </tiny-form-item>
    </tiny-form>
    <tiny-form v-if="props.editData.dataSource=='1'">
      <tiny-row>
        <label style="padding-left: 20px; color: #6c6897">取值条件</label>
        <yu-ace-editor :data="data.detail.sqlField" lang="sql" wrap="true" fontSize="12" width="100%" height="300px" v-model:value="data.detail.sqlField"></yu-ace-editor> 
      </tiny-row>
      <tiny-row>
        <tiny-col :span="20" :offset="18" style="padding-top: 30px">
          <tiny-button-group>
            <tiny-button type="primary" round @click="saveBtn"><vo-icon iconName="save"></vo-icon>确定</tiny-button>
            <tiny-button type="success" round><vo-icon iconName="refresh"></vo-icon>重置</tiny-button>
          </tiny-button-group>
        </tiny-col>
      </tiny-row>
    </tiny-form>

    <vo-table :data="data.tableData.data" :cols="data.tableData.cols" v-if="props.editData.dataSource=='0'" ref="baseGrid"   :dropConfig="data.dropConfig">
      <template #leftBar>
        <tiny-button-group class="ml-4">
          <tiny-button @click="addRow">新增一行</tiny-button>
        </tiny-button-group>
      </template>
      <template #rightBar>
        <tiny-button type="primary" @click="saveBtn">保存</tiny-button>
      </template>

      <template v-slot:handleSlot="{row}">
          <tiny-button size="small" type="text" @click="delRow(row)"><vo-icon fontSize="17px" color="red" iconName="shanchu1" /></tiny-button>
      </template>
      <template v-slot:isStopSolt="{row}">
        <tiny-switch v-model="row.isStop" true-value="0" false-value="1" @change="changeIsStop(row)" show-text>
        <template #open>
        <span>是</span>
        </template>
        <template #close>
          <span>否</span>
        </template>
        </tiny-switch>
      </template>

    </vo-table>
  </div>
</template>

<script setup>
  import {reactive, ref, toRef, getCurrentInstance, onUpdated, onMounted, watch} from 'vue';
  import {Modal, Notify,TinySwitch} from '@opentiny/vue';
  const {proxy} = getCurrentInstance();
  const baseGrid = ref(null);
  const data = reactive({
    tableData:{data: [], cols: [],isPage:false},
    dropConfig:{row:true},
    detail:{sqlField:""},
    disabled:false,
    editData:{isCache:"1",isTree:"0","dataSource":"0"},
  })
  const props = defineProps({
    editData: {type: Object, default:() => ({})},
    isShow: {type: Boolean, default: false},
  });
  const changeDataType = val => {
    
  };
  onMounted(() => {
    //加载明细 
    loadDetail();
  });
  

  data.tableData.cols = [
    {type: 'index',width:"60",title:'序号'},
    {title: '有效值', key: 'itemCode', align: 'left', edit: {editor: true, type: 'input'}},
    {title: '显示名称', key: 'itemName', align: 'left', edit: {editor: true, type: 'input'}},
    {title: '父级编码', key: 'parentCode', align: 'left', edit: {editor: true, type: 'input'}},
    {title: '是否启用', key: 'isStop', align: 'center',  slot: 'isStopSolt',},
    {
      title: '操作', align: 'center', slot: 'handleSlot',
    },
  ];
  const loadDetail=()=>{

    if(props.editData.dictId!=null){
      data.disabled=true;
      //加载数据
      if(props.editData.dataSource=='0'){
        proxy.$api.data.querySysDictItem(props.editData).then(res => {
          data.tableData.data=res
        })
      }else{
        proxy.$api.data.querySysDictDetail(props.editData).then(res => {
          data.detail = res
        })
      }
    }
  }

  const addRow = () => {
    let row = {
      itemCode: '',
      itemName: '',
      parentCode: '', 
      isStop: '0',
    }
    baseGrid.value.grid().insertAt(row,-1).then((res) => {
      // 新增后，将新增的行设置为当前行
      baseGrid.value.grid().setActiveRow(res.row)
  })
  };
  // data.editData = toRef(props, 'editData') ;
  // 如果父页面传参，使用父页面数据，否则使用当前页面默认数据
  if (Object.keys(props.editData).length > 0) {
    data.editData = {...data.editData, ...props.editData};
  }

  const emits = defineEmits(['update:isShow']);

  const saveBtn = () => {

    let param = {
      sysDict: props.editData,
      sysDictItem: props.editData.dataSource=='1'?"":baseGrid.value.grid().getTableData().tableData,
      sysDictDyna: data.detail,
    };

    proxy.$api.data.saveSysDict(param).then(res => {
      if (res.code != -1) {
        Modal.message({status: 'success', message: res.msg});
        emits('update:isShow', false);
      } else {
        // 关闭对话框
        Modal.message({status: 'error', message: res.msg});
      }
    });
  };


  const delRow = row => {
    baseGrid.value.grid().remove(row);
  };
</script>

<style lang="scss" scoped></style>
